<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useDesigner } from './DesignerRuntime'
import { StandardCommandInvoker, DesignerCommand } from './core/CommandSystem'
import { PropertyEditorRegistry } from './core/PropertyEditorSystem'
import { DESIGNER_EXTENSION_POINT } from './core/DesignerEngine'
import { LegacyAdapter } from './compat/LegacyAdapter'
// 不需要导入 WidgetRegistry，因为它是一个匿名对象

const engine = useDesigner()
const widgetCount = ref(0)
const propertyEditorCount = ref(0)

// 测试命令系统
class TestCommand implements DesignerCommand {
  // 添加必需的属性
  id = 'test-command';
  canUndo = true;
  
  execute() {
    console.log('Command executed')
  }
  undo() {
    console.log('Command undone')
  }
  redo() {
    console.log('Command redone')
  }
}

// 测试属性编辑器
const registerTestEditor = () => {
  const registry = engine.getExtension<PropertyEditorRegistry>(
    DESIGNER_EXTENSION_POINT.PROPERTY_EDITOR
  )
  registry.registerEditor('text', {
    template: '<input type="text" />'
  })
  console.log('Text editor registered')
}

// 测试旧版小部件适配
const testLegacyAdapter = () => {
  // 创建一个计数器来跟踪注册的小部件数量
  let count = 0;
  
  // 创建一个自定义的 registerWidget 函数，用于计数和检查属性编辑器
  const originalRegistry = engine.getExtension(
    DESIGNER_EXTENSION_POINT.WIDGET_REGISTRY
  );
  
  if (originalRegistry) {
    const originalRegisterWidget = originalRegistry.registerWidget;
    
    // 替换 registerWidget 方法以进行计数
    originalRegistry.registerWidget = (descriptor) => {
      count++;
      console.log(`Registering widget: ${descriptor.name || descriptor.type}`);
      
      // 检查第一个小部件的属性编辑器
      if (count === 1) {
        console.log('First widget:', descriptor.name || descriptor.type);
        
        if (descriptor.propertyEditors) {
          propertyEditorCount.value = descriptor.propertyEditors.length;
          console.log(`First widget has ${descriptor.propertyEditors.length} property editors`);
          console.log('Property editors:', descriptor.propertyEditors);
        }
      }
      
      // 调用原始的 registerWidget 方法
      originalRegisterWidget(descriptor);
    };
  }
  
  // 注册旧版小部件
  LegacyAdapter.registerLegacyWidgets();
  
  // 更新计数
  widgetCount.value = count;
  console.log(`Registered ${count} legacy widgets`);
  
  // 恢复原始的 registerWidget 方法
  if (originalRegistry) {
    originalRegistry.registerWidget = originalRegisterWidget;
  }
}

onMounted(() => {
  // 验证命令系统
  const commandExecutor = engine.getExtension<StandardCommandInvoker>(
    DESIGNER_EXTENSION_POINT.COMMAND_EXECUTOR
  )
  commandExecutor.execute(new TestCommand())
  
  // 验证属性编辑器
  registerTestEditor()
  
  // 验证状态管理
  const stateManager = engine.getExtension(
    DESIGNER_EXTENSION_POINT.STATE_MANAGER
  )
  stateManager.setState({ test: 'designer-ready' })
  console.log('Current state:', stateManager.getState())
  
  // 测试旧版小部件适配
  testLegacyAdapter()
})
</script>

<template>
  <div class="designer-test">
    <h2>Designer Validation</h2>
    <p>Check browser console for test results</p>
    
    <div class="test-results">
      <h3>Legacy Adapter Test Results</h3>
      <p>Registered widgets: <strong>{{ widgetCount }}</strong></p>
      <p>First widget property editors: <strong>{{ propertyEditorCount }}</strong></p>
    </div>
  </div>
</template>

<style scoped>
.designer-test {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-results {
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #f9f9f9;
}

h3 {
  margin-top: 0;
  color: #333;
}

strong {
  color: #409EFF;
}
</style>